<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/index_小黑记事本.css" rel="stylesheet" type="text/css">
</head>
<body>

<!--主体部分-->
<section id="todoapp">

    <!-- 输入框-->
    <header class="header">
        <h1>小黑记事本</h1>
        <input autocomplete="off" autofocus="autofocus"
               class="new-todo"
               placeholder="请输入任务"
               v-model="inputValue" v-on:keyup.enter="add">
    </header>

    <!--列表区域-->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item, index) in list">
                <div class="view">
                    <span class="index">{{index + 1}}.</span>
                    <label>{{item}}</label>
                    <button @click="remove(index)" class="destroy"></button>
                </div>
            </li>
        </ul>
    </section>

    <!--统计和清空 -->
    <footer class="footer">
        <span class="todo-count" v-if="list.length != 0">
          <strong>{{list.length}}</strong>
           items left
        </span>
        <button @click="clear" class="clear-completed" v-show="list.length != 0">
            Clear
        </button>
    </footer>
</section>
<!--底部-->
<footer class="info">
    <p>
        <a href="http:www.itheima.com">
            <img alt="" src="img/black.png">
        </a>
    </p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var app = new Vue({
        el: "#todoapp",
        data: {
            list: ["写代码", "吃饭饭", "睡觉觉"],
            inputValue: ""
        },
        methods: {
            add: function () {
                /*
                 * push()方法将一个或多个元素添加到数组的末尾并返回数组的新长度
                 * 参数：elementN – 要添加到数组末尾的元素
                 * 返回：调用方法的对象的新length属性
                 */
                let length = this.list.push(this.inputValue);
            },
            remove: function (index) {
                console.log("删除" + index);
                /*
                 * 第一个参数, 从哪里删除, 第二个参数, 删除多少个
                 * this.list.splice(index, 1);
                 */
                this.list.splice(index, 1);
            },
            clear: function () {
                this.list.splice(0, this.list.length);
            }
        }
    });
</script>
</body>
</html>